<template>
  <div>
    <h1>reactive vs ref</h1>
    <h2>
      {{ obj1 }}
    </h2>  
    <button @click="changeAge1">改变年龄1</button>
    <h2>
      {{ obj2 }}
    </h2>
    <button @click="changeAge2">改变年龄2</button>
  </div>
</template>
<script>
import { reactive, ref } from 'vue';
export default {
  setup () {
    const obj1 = reactive({
      name: 'zs',
      age: 18
    })
    const changeAge1 = () => {
      obj1.age++
    }
    const obj2 = ref({
      name: 'ls',
      age: 20
    })
    const changeAge2 = () => {
      // 注意obj2是ref对象，拿里面的数据要先.value
      obj2.value.age++
    }
    return {
      obj1,
      obj2,
      changeAge1,
      changeAge2
    }
  }
}
</script>


